<template>
	<view class="container">
		<view class="bg1">
			<view></view>
		</view>
		<view class="dian"></view>
		<uv-navbar bgColor="transparent" leftIconSize="0px" title="首页" :fixed="true" :placeholder="true" :titleStyle="{
				'font-weight': 'bold',
				'font-size': '32rpx',
				'color': '#FFFFFF'
			}" />

		<view class="content">
			<view class="xingqiu" style="z-index: 2;">
				<view class="left-top"></view>
				<view class="right-top"></view>
				<view class="right-bottom"></view>

				<view class="box-5" style="background-color: transparent;"></view>
				<view class="box-4"></view>
				<view class="box-3"></view>
				<view class="box-2"></view>
				<view class="box-1"></view>
				<view class="box-5">
					<!-- <planet-sphere :width="675" :height="675" :users="userList" @userClick="onUserClick" :cameraFov="90"
						:avatarSize="100" :userNameSize="30" :cameraDistance="10" :autoRotateSpeed="0.5"/> -->
					<qx-rotate-2d @circleTapComplete="circleTapComplete"></qx-rotate-2d>
				</view>
			</view>
			<view class="box1">
				<view class="top">
					<view class="left">
						<image src="https://www.guizhouqy.com/mini/index11.png" mode=""></image>
					</view>
					<view class="right" @click="navTo('/pages/help/list')">
						<text>预定入口</text>
						<image src="https://www.guizhouqy.com/mini/down.png" mode=""></image>
					</view>
				</view>
				<scroll-view class="ss-scroll-navbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
					<view v-for="(item, index) in navList" :key="index" class="nav-item"
						:class="{current: index === tabCurrentIndex}" @click="tabChange(index)" :id="'item-' + index">
						<view class="img">
							<view class="star">
								<image src="https://www.guizhouqy.com/mini/star-y.png" mode=""></image>
								<image src="https://www.guizhouqy.com/mini/star-y.png" mode=""></image>
								<image src="https://www.guizhouqy.com/mini/star-y.png" mode=""></image>
								<image src="https://www.guizhouqy.com/mini/star-y.png" mode=""></image>
								<image src="https://www.guizhouqy.com/mini/star-b.png" mode=""></image>
							</view>
							<image :src="item.avatar" mode="aspectFill" class="slide-image"
								:class="index == tabCurrentIndex?'active':''"
								@click="navTo('/pages/help/detail?user_id='+item.user_id)" />
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="box2">
				<view class="left">
					<image class="img1" src="https://www.guizhouqy.com/mini/index1.png" mode=""></image>
					<image class="img2" src="https://www.guizhouqy.com/mini/index2.png" mode=""></image>
					<image class="img3" src="https://www.guizhouqy.com/mini/index3.png" mode=""></image>
					<image class="img4" src="https://www.guizhouqy.com/mini/index4.png" mode=""></image>
					<view class="apply" @click="bookNow">立即预约</view>
				</view>
				<view class="right">
					<view class="module1" @click="buyVip">
						<image class="img5" src="https://www.guizhouqy.com/mini/index5.png" mode=""></image>
						<image class="img6" src="https://www.guizhouqy.com/mini/index6.png" mode=""></image>
						<image class="img7" src="https://www.guizhouqy.com/mini/index7.png" mode=""></image>
					</view>
					<view class="module2" @click="bookNow">
						<image class="img8"
							src="https://www.guizhouqy.com/storage/local/20250914/8a798312a06b597c350b0a7d19f59d82.png"
							mode=""></image>
						<image class="img9"
							src="https://www.guizhouqy.com/storage/local/20250914/992c786ca8858a1e678f4dd47ea39be5.png"
							mode=""></image>
						<image class="img10" src="https://www.guizhouqy.com/mini/index10.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="box3">
				<view class="but" @click="navTo('/pages/order/order?status=0&type=1')">我的订单</view>
			</view>
			<view style="margin-bottom: 110rpx;"></view>
		</view>
		<!-- 		<view class="address">
			<view class="left">
				
			</view>
			<view class="right" @click="openAddress">
				<image src="https://www.guizhouqy.com/mini/location.png" mode=""></image>
				<text>新印厂店</text>
			</view>
		</view> -->
		<!-- <tabbar :count="0"></tabbar> -->
	</view>
</template>

<script>
	import tabbar from '@/components/custom-tab-bar/index';
	let that;
	import circles from '@/components/qx-rotate-2d/circle.js'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				userList: [],
				scrollLeft: 0,
				widthList: [],
				screenWidth: 0,
				tabCurrentIndex: 0,
				list: [],
				navList: []
			};
		},

		onLoad() {
			that = this;
			// this.getData();
			let list = [];
			for (var j = 0; j < 4; j++) {
				for (var i = 0; i < circles.length; i++) {
					list.push({
						id: circles[i].user_id,
						name: circles[i].label,
						color1: circles[i].color1,
						color2: circles[i].color2
					})
				}
			}
			this.userList = list;
		},
		onShow() {
			// #ifdef APP
			plus.navigator.setStatusBarStyle("dark");
			// #endif
			this.getList()
		},
		mounted() {

		},
		onReady() {

		},
		created() {
			var that = this;
			this.calculateWindowWidth();
			setTimeout(function() {
				that.calculateItemWidth();
			}, 1000);
		},
		methods: {
			// 立即预约
			bookNow() {
				const r = Math.floor(Math.random() * (this.navList.length - 1))
				const temp = this.navList[r]

				uni.navigateTo({
					url: '/pages/help/detail?user_id=' + temp.user_id
				})

			},

			// 开通vip
			buyVip() {
				this.$tool.error('正在开发请稍后')
				// uni.navigateTo({
				// 	url: '/pages/vip/index'
				// })
			},
			//获取助教列表
			async getList() {
				uni.showLoading({
					title: '请稍后'
				})
				let res = await this.$api.meadowlands.getMainAssistant.get({
					limit: 10
				})
				uni.hideLoading()
				if (res.code == 0) {
					this.list = res.data
					this.navList = res.data;
				} else {
					this.$tool.error(res.msg);
				}
			},
			openAddress() {
				uni.chooseAddress({
					success(res) {
						console.log("res", res)
					},
					fail(err) {
						console.log("err", err)
					}
				})
			},
			/**
			 * 导航栏navbar
			 * 点击事件
			 */
			tabChange(index) {
				this.tabCurrentIndex = index
				var widthArr = this.widthList;
				var scrollWidth = 0;
				for (var i = 0; i < index + 1; i++) {
					scrollWidth += widthArr[i];
				}
				let currentWidth = widthArr[index];
				// scrollView 居中算法
				// 减去固定宽度位移
				// 减去选中的bar的宽度的一半
				scrollWidth -= this.screenWidth / 2;
				scrollWidth -= currentWidth / 2;
				this.scrollLeft = scrollWidth;
			},
			calculateItemWidth() {
				var that = this;
				var arr = [];
				let w = 0;
				this.navList.forEach((item, index) => {
					let view = uni.createSelectorQuery().in(this).select("#item-" + index);
					view.fields({
						size: true
					}, data => {
						arr.push(data.width);
					}).exec();
				})
				this.widthList = arr;
			},
			calculateWindowWidth() {
				var info = uni.getSystemInfoSync();
				this.screenWidth = info.screenWidth;
			},
			onUserClick(user) {
				console.log('点击用户:', user)
				if (user.id) {
					// this.navTo(user.id);
				}
			},
			circleTapComplete(e) {
				// this.navTo(e.id);
			},
			// navTo(id) {
			// 	navTo('/pages/warehouse/warehouse?house_id=' + id)
			// },
			navTo(url) {
				console.log("url", url)
				uni.navigateTo({
					url
				})
				return
				if (!this.isLogin) {
					goLogin();
				}


			},
			async getData() {
				const res = await this.$api.home.home.get();
			},

		},
	};
</script>

<style lang="scss" scoped>
	.container {
		background: #0B0C17;
		height: unset;
		height: 100vh;
		padding-bottom: 20rpx;
		overflow: hidden;

		.bg1 {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			position: absolute;
			left: calc(50%-59px);

			view {
				width: 118px;
				height: 118px;
				background: linear-gradient(90deg, #C829F3 0%, #4516CA 100%);
				box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				opacity: 0.9;
				filter: blur(90px);
			}
		}

		.dian {
			width: 118px;
			height: 118px;
			background: linear-gradient(90deg, #1F87EF 0%, #1F87EF 100%);
			box-shadow: inset 0rpx 8rpx 8rpx 0rpx rgba(0, 0, 0, 0.25);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 0.9;
			filter: blur(90px);
			position: absolute;
			left: 0;
			top: 20px;
			z-index: 1;
			/* 添加较低的z-index */
		}
	}

	.content {
		height: calc(100% - 70rpx);
		overflow: auto;
	}

	.xingqiu {
		// flex: 1;
		width: 750rpx;
		height: 750rpx;
		position: relative;
		overflow: hidden;

		.title {
			width: 177rpx;
			height: 36rpx;
			position: absolute;
			top: 60rpx;
			left: 24rpx;
			pointer-events: none;
		}

		.left-top {
			width: 380rpx;
			height: 380rpx;
			background: #8E86F2;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 0.5;
			filter: blur(70px);
			position: absolute;
			top: 36rpx;
			left: -166rpx;
			pointer-events: none;
		}

		.right-top {
			width: 402rpx;
			height: 402rpx;
			background: #E31616;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 0.5;
			filter: blur(70px);
			position: absolute;
			right: -201rpx;
			top: 18rpx;
			pointer-events: none;
		}

		.right-bottom {
			width: 590rpx;
			height: 590rpx;
			background: #1D46FC;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			opacity: 0.3;
			filter: blur(70px);
			position: absolute;
			right: -250rpx;
			bottom: -250rpx;
			pointer-events: none;
		}

		.box-5,
		.box-4,
		.box-3,
		.box-2,
		.box-1 {
			width: 675rpx;
			height: 675rpx;
			background: rgba(255, 255, 255, 0.03);
			border-radius: 100%;
			border: 2rpx solid rgba(235, 137, 143, 0.03);
			// opacity: 0.1;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.box-4 {
			width: calc(750rpx * 0.8);
			height: calc(750rpx * 0.8);
		}

		.box-3 {
			width: calc(750rpx * 0.7);
			height: calc(750rpx * 0.7);
		}

		.box-2 {
			width: calc(750rpx * 0.6);
			height: calc(750rpx * 0.6);
		}

		.box-1 {
			width: calc(750rpx * 0.5);
			height: calc(750rpx * 0.5);
		}
	}


	.line-box {
		width: 100%;
		display: flex;
		padding: 0 2%;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.line-box-item {
		width: 49%;
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.line-1 {
		width: 100%;
		height: 144rpx;
		background: linear-gradient(5deg, #48B3CE 0%, #BF16ED 100%);
		border-radius: 16rpx;
		position: relative;

		.image {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
		}
	}

	.line-2 {
		width: 100%;
		height: 192rpx;
		background: linear-gradient(5deg, #529BFF 0%, #6037D4 100%);
		border-radius: 16rpx;
		position: relative;

		.image {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
		}
	}

	.line-3 {
		width: 100%;
		height: 192rpx;
		background: linear-gradient(5deg, #C829F3 0%, #A893E4 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		position: relative;

		.image {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
		}
	}

	.line-4 {
		width: 100%;
		height: 144rpx;
		background: linear-gradient(35deg, #C829F3 0%, #4516CA 100%);
		border-radius: 16rpx;
		position: relative;

		.image {
			position: absolute;
			right: 10rpx;
			bottom: 10rpx;
		}
	}

	.line-1,
	.line-2,
	.line-3,
	.line-4 {
		display: flex;
		flex-direction: column;
		padding: 24rpx 26rpx;
		box-sizing: border-box;
		background-color: transparent;

		.text-1 {
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.text-2 {
			font-weight: bold;
			font-size: 24rpx;
			color: #D9D9D9;
		}
	}


	.heng-three-box {
		display: flex;
		padding: 0 2%;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: 16rpx;

		.heng-three-1 {

			background: linear-gradient(5deg, #D1B020 0%, #73D27B 100%);
		}

		.heng-three-2 {
			background: linear-gradient(5deg, #208A33 0%, #38EE99 100%);
		}

		.heng-three-3 {
			background: linear-gradient(5deg, #19C180 0%, #38ABEE 100%);
		}

		.heng-three-1,
		.heng-three-2,
		.heng-three-3 {
			position: relative;
			padding: 24rpx 26rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			width: 32%;
			height: 172rpx;
			border-radius: 16rpx;

			.image {
				position: absolute;
				right: 10rpx;
				bottom: 10rpx;
			}

			.text-1 {
				font-weight: 600;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.text-2 {
				font-weight: bold;
				font-size: 24rpx;
				color: #D9D9D9;
				margin-top: 10rpx;
			}

			.text-3 {
				font-weight: bold;
				font-size: 24rpx;
				color: #D9D9D9;
			}
		}
	}

	.heng-two-box {
		width: 100%;
		display: flex;
		padding: 0 2%;
		justify-content: space-between;
		box-sizing: border-box;
		margin-top: 16rpx;
	}

	.heng-two-item {
		width: 49%;
		display: flex;
		flex-direction: column;
		border-radius: 16rpx;
		position: relative;
		height: 144rpx;
		background: linear-gradient(5deg, #097D6E 0%, #38ABEE 100%);
		padding: 24rpx 26rpx;
		box-sizing: border-box;

		.image {
			position: absolute;
			right: 5rpx;
			bottom: 5rpx;
		}

		.text-1 {
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.text-2 {
			font-weight: bold;
			font-size: 24rpx;
			color: #D9D9D9;
		}
	}

	.heng-two-item:nth-of-type(2) {
		background: linear-gradient(229deg, #EECB1C 0%, #F36A0F 100%);
	}

	.box1 {
		margin-top: 40rpx;

		.top {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			padding: 0 24rpx;

			.left {
				image {
					width: 177rpx;
					height: 24rpx;
				}
			}

			.right {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				text {
					font-weight: 600;
					font-size: 28rpx;
					color: #FFFFFF;
				}

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	}

	.box2 {
		padding: 0 24rpx;
		display: flex;
		flex-direction: row;

		.left {
			height: 394rpx;
			width: 352rpx;
			position: relative;

			.img1 {
				width: 100%;
				height: 100%;
			}

			.img2 {
				position: absolute;
				width: 175rpx;
				height: 36rpx;
				left: 28rpx;
				top: 32rpx;
			}

			.img3 {
				position: absolute;
				width: 178rpx;
				height: 35rpx;
				left: 28rpx;
				top: 68rpx;
			}

			.img4 {
				position: absolute;
				width: 142rpx;
				height: 18rpx;
				left: 28rpx;
				top: 125rpx;
			}

			.apply {
				width: 160rpx;
				height: 56rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 48rpx 48rpx 48rpx 48rpx;
				border: 2rpx solid #15D1E2;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
				position: absolute;
				bottom: 36rpx;
				left: 22rpx;
			}
		}

		.right {
			width: calc(100% - 180px);

			.module1 {
				width: 100%;
				margin-left: 8rpx;
				height: 184rpx;
				background: linear-gradient(313deg, #5A25F0 0%, #C69CFD 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 12rpx;
				position: relative;

				.img5 {
					width: 175rpx;
					height: 36rpx;
					position: absolute;
					top: 16px;
					left: 30rpx;
				}

				.img6 {
					width: 133rpx;
					height: 50rpx;
					position: absolute;
					top: 86rpx;
					left: 30rpx;
				}

				.img7 {
					width: 139rpx;
					height: 128rpx;
					position: absolute;
					right: 8rpx;
					bottom: 12rpx;
				}
			}

			.module2 {
				width: 100%;
				margin-left: 8rpx;
				height: 184rpx;
				background: linear-gradient(134deg, #9A24B9 0%, #7116E9 100%);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 16rpx;
				position: relative;

				.img8 {
					width: 176rpx;
					height: 36rpx;
					position: absolute;
					top: 26rpx;
					left: 30rpx;
				}

				.img9 {
					width: 88rpx;
					height: 50rpx;
					position: absolute;
					top: 80rpx;
					left: 30rpx;
				}

				.img10 {
					width: 132rpx;
					height: 130rpx;
					position: absolute;
					right: 8rpx;
					bottom: 12rpx;
				}
			}
		}
	}

	.box3 {
		padding: 0 24rpx;
		margin-top: 32rpx;

		.but {
			width: 100%;
			height: 92rpx;
			background: linear-gradient(313deg, #7116E9 0%, #15D1E2 100%);
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
		}
	}

	.ss-scroll-navbar {
		width: calc(100% - 48rpx);
		white-space: nowrap;
		padding-top: 34rpx;
		margin-left: 24rpx;
		margin-bottom: 32rpx;

		.nav-item {
			text-align: center;
			padding-right: 16rpx;
			color: #303133;
			display: inline-block;
			position: relative;
			font-size: 30upx;

			.img {
				width: 202rpx;
				height: 256rpx;
				position: relative;

				.star {
					position: absolute;
					right: 6rpx;
					top: 6rpx;
					width: 112rpx;
					height: 26rpx;
					background: rgba(0, 0, 0, 0.2);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-around;

					image {
						width: 12rpx;
						height: 12rpx;
					}
				}

				.slide-image {
					width: 202rpx;
					height: 256rpx;
				}
			}
		}

		.nav-item:nth-child(1) {
			padding-left: 0;
		}
	}

	.active1 {
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 4rpx solid #9A24B9;
	}

	.address {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-top: 100rpx;

		.right {
			height: 48rpx;
			border-radius: 64rpx 64rpx 64rpx 64rpx;
			border: 2rpx solid #9A24B9;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			padding: 10rpx;
			margin-right: 20rpx;
			margin-bottom: 10rpx;

			image {
				width: 32rpx;
				height: 32rpx;
			}

			text {
				font-weight: 400;
				font-size: 24rpx;
				background: linear-gradient(275.46928023750934deg, #C829F3 0%, #A893E4 100%);
				/* 关键属性：背景裁剪到文字 */
				-webkit-background-clip: text;
				background-clip: text;
				/* 隐藏原始文字颜色 */
				color: transparent;
				margin-left: 6rpx;
			}
		}
	}
</style>